<template>
    <div 
        class="tags_cp"
        :style="{
            gridTemplateColumns: 'repeat('+tags.length+', min-content)'
        }">
        <el-tag
            v-for="(item,index) in tags"
            :key="index"
            :disable-transitions="true"
            :type="getTagType(item.id || index)"
            size="small"
            effect="dark">
            {{ item.name || item }}
        </el-tag>
    </div>
</template>

<script>
//公用的标签列表显示组件
export default { 
    name: 'TagsCp',
    props:{
        tags:{
            type:Array,
            default:()=>{
                return [];
            },
        },
    },
    data(){
        return{
            tagType:['','success','info','danger','warning'], //标签的颜色数组
        };
    },
    methods:{
        getTagType(id){  //写入类型标签的颜色
            return this.tagType[id % this.tagType.length];
        },
    },
}
</script>

<style scoped lang="scss">
.tags_cp{
    width: fit-content;
    display: grid;
    grid-gap: 10px;
    .el-tag{
        text-align: center;
        color: #ffffff;
        letter-spacing:1px;
    }
}
</style>